<template>
    <e-layout class="frame">
        <x-body slot="body" class="frame-body">
            <e-wrapper v-if="$route.name == 'detail'">
                <div class="frame-container">
                    <router-view></router-view>
                </div>
            </e-wrapper>
            <e-wrapper :class="classes" v-else>
                <sidebar class="frame-sidebar"/>
                <div class="frame-container">
                    <router-view></router-view>
                </div>
            </e-wrapper>
        </x-body>
        <div slot="footer"></div>
    </e-layout>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { VuecookieGet } from 'utils/cookie'
  export default {
    computed: {
      ...mapGetters({
        global: 'global',
        layout_grid: 'layout_grid', // 是否栅格布局
        race_list: 'race_list', // store数据流要以下划线命名方式
        employee_list: 'employee_list'
      }),
      classes () {
        return this.layout_grid ? 'layout-grid' : ''
      }
    },
    watch: {
      layout_grid (value) {
        this.styles(value)
      }
    },
    created () {
      let token = VuecookieGet('htxk_token') || ''
      let userId = VuecookieGet('htxk_userId') || ''
      this.$store.commit('SET_TOKEN', {
        token: token,
        userId: userId
      })
    },
    mounted () {
      this.styles(this.layout_grid)
      console.log(this)
      /*
       this.$store.dispatch('login', {
       account:'yunfei',
       password: 'yunfei'
       })
      */
    },
    methods: {
      styles (layout) {
        let height = window.innerHeight - 100
        let sidebar = this.$el.querySelector('.frame-sidebar')
        let container = this.$el.querySelector('.frame-container')
        if (layout) {
          sidebar && (sidebar.style.minHeight = height + 'px')
          container && (container.style.minHeight = height + 'px')
        } else {
          sidebar && (sidebar.style.minHeight = '400px')
          container && (container.style.minHeight = '400px')
        }
      }
    }
  }
</script>

<style lang="scss">
    

    body {
        background: #ebf0f5;
    }
    .content-box{ //60边距内容
      margin: 60px;
    }
    .frame {
        &-body {
            margin-top: 40px;
        }
        &-sidebar {
            display: none;
            width: 250px;
            background: #fff;
            margin-right: 20px;
            min-height: 800px;
            position: absolute;
        }
        &-container {
            background: #fff;
            min-height: 800px;
            padding: 1px 0;
        }
        .layout-grid {
            .frame-sidebar {
                display: block;
            }
            .frame-container {
                margin-left: 270px;
            }
            .el-breadcrumb {
                margin-left: -240px;
            }
        }
        .el-breadcrumb {
            position: absolute;
            margin-top: -25px;
        }
        .content {
            padding: 60px;
            > .heading-1:first-child {
                margin-top: 0;
            }
        }
    }
    .router-link:hover{
      color:#3983e5!important;
    }
</style>
